<template>
  <div class="app-container">
    <!-- 上部分表单 -->
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="68px"
      label-position="center"
      class="globalSerchFormStyle"
      style="margin: 10px 0px"
    >
      <el-row>
        <el-col :span="6">
          <el-form-item
            label="所属油企名称"
            prop="enterpriseName"
            size="small"
            label-width="100px"
          >
            <el-select
              v-model="queryParams.enterpriseId"
              :clearable="true"
              filterable
              placeholder="请选择所属油企名称"
              @change="handleSelectChange"
            >
              <el-option
                v-for="(item, index) in enterpriseList"
                :key="index"
                :value="item.enterpriseId"
                :label="item.enterpriseName"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="分账出款商户名称"
            prop="stationId"
            size="small"
            label-width="130px"
          >
            <el-select
              v-model="queryParams.stationId"
              :clearable="true"
              filterable
              placeholder="请选择分账出款商户名称"
            >
              <el-option
                v-for="(item, index) in stationIdList"
                :key="index"
                :value="item.stationId"
                :label="item.stationName"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="分账出款商户编号"
            prop=""
            clearable
            size="small"
            label-width="130px"
          >
            <el-input
              v-model="queryParams.code"
              placeholder="请输入分账出款商户编号"
              style="width: 100px"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="分账结果"
            prop="status"
            size="small"
            label-width="130px"
          >
            <el-select
              v-model="queryParams.status"
              :clearable="true"
              filterable
              placeholder="请选择分账结果"
            >
              <el-option label="分账中" value="0" />
              <el-option label="成功" value="1" />
              <el-option label="失败" value="2" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item
            label="分账完成时间"
            label-width="100px"
            prop="dateRangeOverDate"
          >
            <el-date-picker
              size="small"
              v-model="dateRangeOverDate"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 190px"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="分账创建时间"
            label-width="130px"
            prop="dateRangeCreatedDate"
          >
            <el-date-picker
              size="small"
              v-model="dateRangeCreatedDate"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 190px"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="商户订单号"
            prop="orderNo"
            clearable
            size="small"
            label-width="130px"
          >
            <el-input
              v-model="queryParams.orderNo"
              placeholder="请输入分账交易商户订单号"
              style="width: 100px"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="分账订单号"
            prop="uuid"
            clearable
            size="small"
            label-width="130px"
          >
            <el-input
              v-model="queryParams.uuid"
              placeholder="请输入商户分账订单号"
              style="width: 100px"
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col
          :span="1.5"
          style="height: 2rem; margin: auto 0; margin-top: 3px"
        >
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="handleQuery"
            size="small"
            style="margin-left: 20px"
            >搜索</el-button
          >
        </el-col>
        <el-col
          :span="1.5"
          style="height: 2rem; margin: auto 0; margin-top: 3px"
        >
          <el-button
            icon="el-icon-refresh"
            size="small"
            @click="resetQuery"
            style="margin-left: 10px"
            plain
            >重置</el-button
          >
        </el-col>
      </el-row>
    </el-form>
    <!-- 表格 -->
    <el-table
      :loading="loading"
      style="width: 100%"
      :data="tableList"
      stripe
      v-loading="loading"
    >
      <af-table-column
        label="分账出款商户名称"
        align="left"
        prop="stationName"
      />

      <af-table-column label="分账出款商户编号" align="left" prop="beginMmo" />
      <af-table-column
        label="所属油企名称"
        align="left"
        prop="enterpriseName"
      />
      <af-table-column label="商户订单号" align="left" prop="orderNo" />
      <af-table-column label="订单金额" align="left" prop="allocatedAmount" />
      <af-table-column label="正常交易手续费" align="left" prop="commission" />

      <af-table-column label="分账手续费" align="left" prop="recFeeAmt">
      </af-table-column>
      <af-table-column label="商户分账订单号" align="left" prop="uuid" />
      <af-table-column
        label="分账结果"
        align="left"
        prop="status"
        :formatter="formatStatus"
      >
      </af-table-column>
      <af-table-column label="分账创建时间" align="left" prop="createTime" />
      <af-table-column label="分账完成时间" align="left" prop="overTime" />
      <af-table-column
        fixed="right"
        label="操作"
        align="left"
        class-name="small-padding fixed-width"
        width="100px"
      >
        <!--fixed="right"-->
        <template slot-scope="scope">
          <el-button
            v-show="scope.row.status == 1"
            size="mini"
            type="text"
            @click="handleView(scope.row)"
            >查看</el-button
          >
        </template>
      </af-table-column>
    </el-table>

    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <ViewForm
      :viewDialog="viewDialog"
      :params="currentData"
      :type="'details'"
      @changeDialog="viewDialog = false"
    ></ViewForm>
  </div>
</template>
<script>
import { listEnterpriseStation, getStationByEnterprise } from "@/api/dept";
import getUserProfileName from "@/utils/getUserProfile";
import ViewForm from "./ViewForm.vue";
import { enterpriseList } from "@/api/station/order";
import { getDetails, viewDetails } from "@/api/billingAgreements/index.js";
export default {
  name: "BaDetails",
  components: { ViewForm },
  data() {
    return {
      loading: false,
      total: 0,
      // 查询参数
      queryParams: {
        pageSize: 10,
        pageNum: 1,
        stationId: "",
        status: "",
        uuid: "",
        orderNo: "",
        code: "",
      },
      dateRangeCreatedDate: [],
      dateRangeOverDate: [],
      // 油站列表
      stationIdList: [],
      // 表单数据
      tableList: [],
      viewDialog: false,
      loading: false,
      currentData: {},
      enterpriseList: [],
    };
  },
  created() {
    this.getList();
    this.getStationIdList();
    this.getEnterpriseList();
  },
  methods: {
    // 查询油企
    async getEnterpriseList() {
      const res = await enterpriseList();
      this.enterpriseList = res.rows;
    },
    // 根据油企获取油站
    handleSelectChange(value) {
      this.stationIdList = [];
      this.queryParams.stationId = null;
      this.getStationList(value);
    },
    // 根据油企获取油站
    async getStationIdList() {
      const value = this.$store.state.user.presentEnterprise?.enterpriseId;
      this.stationIdList = [];
      this.queryParams.stationId = null;
      const res = await getStationByEnterprise({ enterpriseId: value });
      this.stationIdList = res.data;
    },
    async getStationList(val) {
      // 判断是不是admin账号
      const isDelete = await getUserProfileName();
      if (isDelete) {
        // 是
        const res = await listEnterpriseStation({ enterpriseId: val });
        this.stationIdList = res;
      } else {
        // 不是
        const res = await getStationByEnterprise();
        this.stationIdList = res.data;
      }
    },
    formatStatus(row) {
      const statusType = {
        0: "分账中",
        1: "分账成功",
        2: "分账失败",
      };
      return statusType[row.status];
    },
    // 查看
    async handleView(row) {
      this.currentData = await viewDetails({ uuid: row.uuid });
      this.viewDialog = true;
    },
    // 查询
    async handleQuery() {
      this.getList();
    },
    // 重置
    resetQuery() {
      this.queryParams = {
        pageSize: 10,
        pageNum: 1,
        stationId: "",
        status: "",
        uuid: "",
        orderNo: "",
        code: "",
      };
      this.dateRangeCreatedDate = [];
      this.dateRangeOverDate = [];
      this.handleQuery();
    },
    // 获取初始值
    async getList() {
      this.loading = true;
      const queryParams = {
        ...this.queryParams,
        beginTime: this.dateRangeCreatedDate[0],
        endTime: this.dateRangeCreatedDate[1],
        overBeginTime: this.dateRangeOverDate[0],
        overEndTime: this.dateRangeOverDate[1],
      };
      const res = await getDetails(queryParams);
      this.tableList = res.rows;
      this.total = res.total;
      this.loading = false;
    },
  },
};
</script>
<style lang="scss" scoped></style>
